import { styled } from "styledfc";
import Tabbar from "./components/Tabbar";
import img from "./img";
import { Route, Routes } from "react-router-dom";
import routes from "./routes";
import { useDispatch } from "react-redux";
import { setOssConfig } from "./store/modules/ossStore";
import { useEffect } from "react";
import { getOssSignature } from "./api";
export interface RouterItem {
    icon: string;
    iconActive: string;
    path: string;
}
const routerList: RouterItem[] = [
    {
        icon: img.iconIndex,
        iconActive: img.iconIndexActive,
        path: "/",
    },
    {
        icon: img.iconKind,
        iconActive: img.iconKindActive,
        path: "/kind",
    },
    {
        icon: img.iconCol,
        iconActive: img.iconColActive,
        path: "/col",
    },
    {
        icon: img.iconHome,
        iconActive: img.iconHomeActive,
        path: "/home",
    },
];
const App = styled(
    (_, { className }) => {
        const dispatch = useDispatch();
        useEffect(() => {
            getOssSignature().then((res) => {
                const { code, data } = res as { code: number; data: any };
                if (code === 200) {
                    dispatch(setOssConfig(data));
                }
            });
        }, []);
        return (
            <div className={className}>
                <Routes>
                    {routes.map((item) => (
                        <Route key={item.path} path={item.path} element={<item.element />} />
                    ))}
                </Routes>
                <Tabbar routerList={routerList} />
            </div>
        );
    },
    {
        color: "#333",
    }
);

export default App;
